<template>
  <div class="page-wrapper">
    <div class="top">
      <div class="bg-img">
        <img class="img" mode="widthFix" src="../../assets/user-bg.png"/>
      </div>
      <div class="user-info">
        <div class="info" v-if="userInfo.avatar">
          <img class="user-img" mode="aspectFill" :src="userInfo.avatar"/>
          <div class="user-name">{{userInfo.nickName}}</div>
        </div>
        <!-- 授权页 -->
        <router-link class="info" v-else to="">
          <img class="user-img" mode="aspectFill" src="../../assets/head.jpg"/>
          <div class="user-name">请授权登录</div>
        </router-link>
        <a class="sub-title">积分说明</a>
      </div>
    </div>
    <div class="mrgin-top">

      <div class="order-nav">
        <div class="nav-header">
          <div class="nav-title">我的订单</div>
          <router-link class="sub-title" to="/order/orderList?state=-1">查看全部订单</router-link>
        </div>
        <div class="main-nav">
          <router-link class="nav-item" to="/order/orderList?state=10">
            <span class="tip-num" v-if="orderInfo.unpayOrderNum > 0">{{orderInfo.unpayOrderNum}}</span>
            <img class="item-img" mode="aspectFit" src="../../assets/order-status-01.png"/>
            <div>待付款</div>
          </router-link>
          <router-link class="nav-item" to="/order/orderList?state=20">
            <span class="tip-num" v-if="orderInfo.unSendOrderNum > 0">{{orderInfo.unSendOrderNum}}</span>
            <img class="item-img" mode="aspectFit" src="../../assets/order-status-02.png"/>
            <div>待发货</div>
          </router-link>
          <router-link class="nav-item" to="/order/orderList?state=30">
            <span class="tip-num" v-if="orderInfo.unReceiveOrderNum > 0">{{orderInfo.unReceiveOrderNum}}</span>
            <img class="item-img" mode="aspectFit" src="../../assets/order-status-03.png"/>
            <div>待收货</div>
          </router-link>
          <router-link class="nav-item" to="/order/orderList?state=40">
            <img class="item-img" mode="aspectFit" src="../../assets/order-status-04.png"/>
            <div>交易成功</div>
          </router-link>
          <router-link class="nav-item" to="/order/orderList?state=5">
            <span class="tip-num" v-if="orderInfo.salesOrderNum > 0">{{orderInfo.salesOrderNum	}}</span>
            <img class="item-img" style="width:1.8rem" mode="aspectFit" src="../../assets/order-status-05.png"/>
            <div>退换/售后</div>
          </router-link>
        </div>
      </div>
      <div class="handle-btns">
        <div class="handle-btn"  @click="goLink('address')">
          <div class="left">
            <img class="icon-btn" mode="aspectFit" src="../../assets/icon-address-btn.png"/>
            <div class="btn-title">收货地址</div>
          </div>
          <div class="right">
            <img class="icon-btn" mode="aspectFit" src="../../assets/icon-go.png"/>
          </div>
        </div>
        <div class="handle-btn" @click="goLink('collect')">
          <div class="left">
            <img class="icon-btn" mode="aspectFit" src="../../assets/icon-noun-btn.png"/>
            <div class="btn-title">我的收藏</div>
          </div>
          <div class="right">
            <img class="icon-btn" mode="aspectFit" src="../../assets/icon-go.png"/>
          </div>
        </div>
        <div class="handle-btn"  @click="goLink('noun')">
          <div class="left">
            <img class="icon-btn" mode="aspectFit" src="../../assets/icon-collect-btn.png"/>
            <div class="btn-title">我的积分</div>
          </div>
          <div class="right">
            <img class="icon-btn" mode="aspectFit" src="../../assets/icon-go.png"/>
          </div>
        </div>
        <router-link class="handle-btn" to="/auth/mobile">
          <div class="left">
            <img class="icon-btn" mode="aspectFit" src="../../assets/icon-phone.png"/>
            <div class="btn-title">绑定手机号</div>
          </div>
          <div class="right">
            {{userInfo.mobile ? userInfo.mobile : ''}}
            <img class="icon-btn" mode="aspectFit" src="../../assets/icon-go.png"/>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { API } from '../../config'

export default {
    name:'user',
    data() {
        return{
            userInfo: {
                nickName: '',
                avatar: '',
                mobile: ''
            },
            orderInfo: {}
        }
    },
    methods: {
        initFun() {
          let vm = this
          // const globalData = wepy.$instance.globalData
          // this.userInfo = globalData.USER_INFO
          let mobile = vm.getLocalStorage('mobile')
          vm.$axios.post(API + '/user/loginByMobile?mobile=' + mobile,{
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}//设置header信息
          }).then((response) => {
            if(response.data && response.data.data){
              vm.userInfo.avatar = response.data.data.avatar
              vm.userInfo.nickName = response.data.data.nickName
            }
          })
          let accesstoken = vm.getLocalStorage('accesstoken');
          
          vm.$axios.get(API + '/order/getOrderNum',{
            headers: {'accesstoken': accesstoken}//设置header信息
          }).then((response) => {
            let res = response.data
            vm.orderInfo = res.data || {}
          })
        },
        goLink(type) {
            // let res = await check()
            // if (res < 1) return
            let vm = this;
            switch (type) {
                case 'noun':
                // 积分
                vm.$router.push('/user/nounRecord')
                break
                case 'collect':
                // 收藏
                vm.$router.push('/user/collectList')
                break
                case 'address':
                // 收藏地址
                vm.$router.push('/user/addressList')
                break

                default:
                break
            }
        }
    },
    mounted(){
      let vm = this
      vm.initFun()
    }
}
</script>

<style lang='less' scoped>
@import '../../css/user/index.less';
</style>